<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<title>菜单</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/amazeui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/app.css">
<link
	href="${pageContext.request.contextPath}/style/css/bootstrap.min.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/style/css/demo.css"
	rel="stylesheet" type="text/css" />
<link
	href="${pageContext.request.contextPath}/style/design/css/layui.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/style/js/amazeui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/style/design/layui.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/treeTable/jquery.treeTable.js"
	type="text/javascript"></script>
</head>
<style type="text/css">
table,td,th {
	border: 1px solid #8DB9DB;
	padding: 5px;
	border-collapse: collapse;
	font-size: 16px;
}
</style>
<body>

	<div
		style="width:100%;background-color:#F8F8FF;height:100%;position: absolute;top:1px;left:1px">
		<div id="operatediv"
			style="height:7%;width:100%;position: absolute;top:10px;left:15px">

			<button id="refrsh" class="am-btn am-btn-primary am-btn-xs"
				onclick="history.go(0)" type="button">
				<i class="glyphicon glyphicon-refresh"></i>刷新
			</button>
			<button id="add" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-plus"></i>添加
			</button>
		</div>


		<div id="page">
			<fieldset>
				<table id="treeTable1" style="width:100%">
					<tr>
						<th style="width:200px;">菜单编号</th>
						<th>菜单名</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					<c:forEach var="item" items="${menulist}" varStatus="status">
						<tr id='${item.menuId}'>
							<td class="id"><span controller='true'>${item.menuId}</span></td>
							<td>${item.menuName}</td>
							<c:choose>
								<c:when test="${item.menuState==1}">
									<td>正常</td>
								</c:when>
								<c:otherwise>
									<td>关闭</td>
								</c:otherwise>

							</c:choose>
							<td><button onclick="ed(${item.menuId});"
									class="am-btn am-btn-primary am-btn-xs" type="button">
									<i class="am-icon-pencil"></i>编辑
								</button>
								<button  onclick="dels(${item.menuId});"
									class="am-btn am-btn-primary am-btn-xs" type="button">
									<i class="glyphicon glyphicon-remove"></i>删除
								</button></td>
						</tr>
						<c:forEach var="se" items="${item.second}">
							<tr id='${se.menuId}' pid='${se.menuParentid}'>
								<td>${se.menuId}</td>
								<td>${se.menuName}</td>
								<c:choose>
								<c:when test="${se.menuState==1}">
									<td>正常</td>
								</c:when>
								<c:otherwise>
									<td>关闭</td>
								</c:otherwise>

							</c:choose>
								<td>
									<button  onclick="ed(${se.menuId});"
										class="am-btn am-btn-primary am-btn-xs" type="button">
										<i class="am-icon-pencil"></i>编辑
									</button>
									<button onclick="dels(${se.menuId});"
										class="am-btn am-btn-primary am-btn-xs" type="button">
										<i class="glyphicon glyphicon-remove"></i>删除
									</button>

								</td>
							</tr>
						</c:forEach>

					</c:forEach>

				</table>

			</fieldset>
		</div>

	</div>
</body>



<!--引用的文件 End-->
<script type="text/javascript">
	//    初始化表格样式和树形结构
	$(function() {
		var option1 = {
			theme : 'vsStyle', //显示样式
			expandLevel : 2, //展开三级分类

		};

		$('#treeTable1').treeTable(option1);//根据表格id来初始化
	});

	layui.use([ 'layer' ], function() {
		var layer = layui.layer;
	});

	$("#add").click(function() {
		layer.open({
			type : 2,
			title : '添加菜单',
			content : [ 'add', 'no' ],
			area : [ '400px', '500px' ],
			end : function() {
				location.reload();
			}
		});

	});
	function ed(id) {
		layer.open({
			type : 2,
			title : '编辑菜单',
			content : [ 'edit?id=' + id, 'no' ],
			area : [ '400px', '500px' ],
			end : function() {
				location.reload();
			}
		});
	}
	function dels(id) {
		layer.open({
			title : '删除菜单',
			content : '确认删除菜单？',
			btn : [ '确认', '取消' ],
			yes : function(index, layero) {
				$.ajax({
					type : "post",
					url : "${pageContext.request.contextPath}/menu/delete",
					data : {id:id},
					dataType : "text",
					traditional : true,//这里设为true就可以了
					success : function(res) {
						if (res == "success") {
							layer.alert('菜单删除成功', {
								skin : 'layui-layer-molv' //样式类名
								,
								closeBtn : 0,
								end : function() {
									location.reload();
								}
							}, function() {
								layer.closeAll();
							});
						} else {
							layer.alert('用户删除失败', {
								skin : 'layui-layer-molv' //样式类名
								,
								closeBtn : 0
							}, function() {
								layer.closeAll();
							});
						}
					},

				});
			}
		});
	}
</script>

</html>
